<template>
  <div class="basequestions-container">
    <el-card class="base-questions-card">
      <!-- el-card -->
      <div slot="header" class="clearfix">
        <span style="font-size: 13px; color: pink">说明：目前支持学科和关键字条件筛选</span>
        <el-button type="buttoon" size="medium" class="addquestions el-button--success">
          <i class="el-icon-edit"></i>
          <span @click="$router.push('/questions/new')">新增试题</span>
        </el-button>
      </div>
      <!-- 表单 -->
      <el-form ref="questionRef" :inline="true" label-width="80px" :model="formInline">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" prop="subjectID">
              <el-select style="width: 100%" v-model="formInline.subjectID" placeholder="请选择" @change="changeSecondList">
                <el-option v-for="(item, index) in subjectList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" prop="secondData">
              <el-select style="width: 100%" v-model="formInline.secondData" placeholder="请选择">
                <el-option v-for="(item, index) in secondList" :key="index" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" prop="tags">
              <el-select style="width: 100%" v-model="formInline.tags" placeholder="请选择">
                <el-option v-for="(item, index) in tagsData" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input style="width: 100%" v-model="formInline.keyword" placeholder="根据题干搜索"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType">
              <el-select style="width: 100%" v-model="formInline.questionType" placeholder="请选择">
                <el-option label="单选" value="1"></el-option>
                <el-option label="多选" value="2"></el-option>
                <el-option label="简答" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select v-model="formInline.difficulty" placeholder="请选择" style="width: 100%">
                <el-option label="简单" value="1"></el-option>
                <el-option label="一般" value="2"></el-option>
                <el-option label="困难" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select v-model="formInline.direction" placeholder="请选择" style="width: 100%">
                <el-option v-for="(item, index) in direction" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="录入人" prop="creator">
              <el-select v-model="formInline.creator" placeholder="请选择" style="width: 100%">
                <el-option label="超级管理员" :value="1"></el-option>
                <el-option label="录入管理员" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input style="width: 108%" v-model="formInline.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input v-model="formInline.shortName" style="width: 108%"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="cityChoise">
            <el-form-item label="城市" prop="province">
              <el-select v-model="formInline.province" placeholder="请选择" @change="choiceCity" style="width: 115px; margin-right: 3px">
                <el-option v-for="(item, index) in provinces" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="city">
              <el-select v-model="formInline.city" placeholder="请选择" style="width: 115px">
                <el-option v-for="(item, index) in city" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button @click="resetForm">清除</el-button>
              <el-button type="primary" @click="onSubmit" class="el-button--primary search">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 总数据条数 -->
      <el-alert :closable="false" :title="`数据一共${total}条`" type="info" show-icon class="tabbleHeader"> </el-alert>
      <!-- 表格 -->
      <el-table :data="questionsList" :header-cell-style="headerStyle" :row-style="{ height: '68px', width: '100% ' }">
        <el-table-column prop="number" label="试题编号" width="120"> </el-table-column>
        <el-table-column prop="subject" label="学科" width="85"></el-table-column>
        <el-table-column prop="catalog" label="目录" width="85"> </el-table-column>
        <el-table-column label="题型" width="85">
          <template #default="{ row }">
            {{ questionType(row.difficulty) }}
          </template>
        </el-table-column>
        <el-table-column label="题干" width="280">
          <template #default="{ row }">
            <p v-html="row.question"></p>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="180">
          <template #default="{ row }"> {{ formatDate(row.addDate) }} </template>
        </el-table-column>
        <el-table-column label="难度" width="85">
          <template #default="{ row }">
            {{ choiceDifficulty[row.questionType] }}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="85"> </el-table-column>
        <el-table-column label="操作">
          <!-- slot-scope="{ row }" -->
          <template #default="{ row }">
            <!-- 预览 -->
            <el-tooltip content="预览 " placement="bottom" effect="light">
              <el-button type="primary" icon="el-icon-view" circle @click="preview(row.id)"></el-button>
            </el-tooltip>
            <!-- 修改 -->
            <el-tooltip content="修改" placement="bottom" effect="light">
              <el-button type="success" class="el-icon-edit is-plain" circle @click="$router.push(`/questions/new?id=${row.id}`)"></el-button>
            </el-tooltip>
            <!-- 删除 -->
            <el-tooltip content="删除" placement="bottom" effect="light">
              <el-button type="info" icon="el-icon-delete" circle @click="removeQut(row.id)"></el-button>
            </el-tooltip>
            <!-- 加入精选 -->
            <el-tooltip content="加入精选" placement="bottom" effect="light">
              <el-button type="warning" class="el-icon-check" circle @click="addCarefullyChoice(row.id)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        background
        layout="prev, pager, next,sizes, jumper"
        :total="total"
        :page-size="paramsQut.pagesize"
        :current-page.sync="paramsQut.page"
        :page-sizes="[5, 10, 20, 50]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        class="pagination-qst"
      >
      </el-pagination>
    </el-card>
    <!-- 预览弹窗 -->
    <questions-preview :rousePreview="dialogVisible" :datas="datas" @closePreview="closePreview" @close="dialogVisible = false"></questions-preview>
  </div>
</template>

<script>
import { list as getQuestionsList, remove as removeListById, choiceAdd } from '@/api/hmmm/questions.js'
import dayjs from 'dayjs'
import { questionType, direction } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple as subjectSimpleList } from '@/api/hmmm/subjects.js'
import { simple as secondDirectory } from '@/api/hmmm/directorys.js'
import { simple as tagssimpleList } from '@/api/hmmm/tags.js'
import QuestionsPreview from '../components/questions-preview.vue'
export default {
  components: {
    //预览弹窗
    QuestionsPreview
  },
  data() {
    return {
      // 表单数据
      formInline: {
        subjectID: undefined,
        secondData: undefined,
        tags: undefined,
        keyword: undefined,
        questionType: undefined,
        difficulty: undefined,
        direction: undefined,
        creator: undefined,
        creator: undefined,
        remarks: undefined,
        shortName: undefined,
        province: undefined,
        city: undefined
      },
      paramsQut: {
        page: 1,
        pages: 1,
        pagesize: 10
      },
      // direction 方向
      direction: {},
      // 学科信息
      subjectList: [],
      // 学科id（value)
      ubjectID: '',
      // 二级目录数据
      secondList: [],
      // 标签数据
      tagsData: [],
      // 表格数据
      questionsList: [],
      total: 0,
      // 表头样式
      headerStyle: {
        width: '100%',
        color: '#909399',
        fontWeight: '700',
        backgroundColor: '#fafafa',
        borderBottom: '2px solid #e8e8e8'
      },
      // 难度选择
      choiceDifficulty: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      // 所有城市，城市下地区
      provinces: [],
      city: [],
      // 加入精选
      choiceState: 1,
      // 预览弹出层
      dialogVisible: false,
      datas: {}
    }
  },
  created() {
    // 基础题库列表
    this.fetchQuestionsList()
    //学科：学科简单列表
    this.getSubjectSimpleList()
    this.direction = direction
    // console.log(provinces())
    this.provinces = provinces()
  },
  methods: {
    //获取基础题库列表
    async fetchQuestionsList() {
      const res = await getQuestionsList({ ...this.paramsQut, ...this.formInline })
      this.questionsList = res.data.items
      this.total = res.data.counts
      // console.log(res)
    },
    handleCurrentChange(newPage) {
      this.paramsQut.page = newPage
      this.fetchQuestionsList()
    },
    handleSizeChange(size) {
      this.paramsQut.pagesize = size
      this.fetchQuestionsList()
    },

    // 格式化时间
    formatDate(date) {
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    },
    //题型选择
    questionType(val) {
      const obj = questionType.find((item) => {
        return item.value == val
      })
      if (obj) return obj.label
    },
    // 学科：学科简单列表
    async getSubjectSimpleList() {
      const { data } = await subjectSimpleList()
      this.subjectList = data
    },
    // 二级目录:学科详情
    async fetchSecondDir() {
      const res = await secondDirectory({ subjectID: this.ubjectID })
      this.secondList = res.data
    },
    // 标签列表
    async getTagsList() {
      const res = await tagssimpleList({ subjectID: this.ubjectID })
      this.tagsData = res.data
    },
    // 下拉框的联动
    async changeSecondList(e) {
      this.ubjectID = e
      this.fetchSecondDir()
      this.getTagsList()
      this.secondList = ''
      this.tagsData = ''
      for (const k in this.subjectList) {
        if (this.formInline.subjects === this.subjectList[k]) {
          this.secondList = this.secondList[this.formInline.subjects]
          this.tagsData = this.tagsData[this.formInline.subjects]
        }
      }
    },
    // 根据城市选择县区
    choiceCity(e) {
      this.city = citys(e)
    },
    // 点击按钮清空表单数据
    resetForm() {
      this.$refs.questionRef.resetFields()
    },
    // 搜索
    async onSubmit() {
      this.fetchQuestionsList()
    },
    // 点击删除
    removeQut(id) {
      this.$confirm('此操作将永久删除该题目?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await removeListById({ ...this.formInline, id: id })
          this.$message.success('删除成功')
          this.fetchQuestionsList()
        })
        .catch(() => {})
    },
    // 加入精选题库
    addCarefullyChoice(id) {
      this.$confirm('确定将该题目加入精选，是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(async () => {
          await choiceAdd({ id: id, choiceState: 1 })
          this.$message.success('添加到精选题库成功')
          this.fetchQuestionsList()
        })
        .catch(() => {})
    },
    // 预览弹窗
    preview(id) {
      this.dialogVisible = true
      this.datas = { id: id }
    },
    closePreview(val) {
      this.dialogVisible = val
    }
  }
}
</script>

<style rel="stylesheet/scss" lang='scss' scoped>
.basequestions-container {
  margin: 10px;
}
.base-questions-card {
  padding: 5px 10px;
}
// ::deep.el-card__header {
//   border-bottom: 1px solid #fff;
// }
.addquestions {
  float: right;
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
  font-size: 12px;
  border-radius: 3px;
}
.el-button--small {
  padding: 9px 15px;
}
.tabbleHeader {
  margin-bottom: 15px;
  background-color: #f4f4f5;
  color: #909399;
}
.pagination-qst {
  margin-top: 20px;
  text-align: right;
}
.el-button--medium.is-circle {
  margin-right: 10px;
}
.el-button--primary {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
}
.el-button--success.is-plain {
  color: #67c23a;
  background: #f0f9eb;
  border-color: #c2e7b0;
}
.el-button--info {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
}
.el-button--warning {
  color: #e6a23c;
  background: #fdf6ec;
  border-color: #f5dab1;
}
.changePop {
  width: 10px;
  margin: 10px;
}
.el-button--primary.search {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}
</style>
